<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-row>
        <el-col>
          <el-button @click="addrole">添加角色</el-button>
        </el-col>
      </el-row>
      <!-- 角色列表区域 -->
      <el-table :data="rolelist" border stripe>
        <!-- 索引列 -->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="角色名称" prop="name"></el-table-column>
        <el-table-column label="角色描述" prop="des"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click=" showEditinfo(scope.row.id)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="delrole(scope.row.id)"
            >删除</el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-search"
              @click="showSetRightDialog(scope.row.id)"
            >分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分配权限对话框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="showSetRightDialogVisible"
      width="50%"
      @close="cancelDialog"
    >
      <!-- 多选框 -->
      <el-checkbox-group v-model="checkedUright" @change="handleCheckedChange">
        <el-checkbox v-for="item in rightlist" :label="item.Uright" :key="item.id">{{item.des}}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="saveRight">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑对话框 -->
    <!-- 操作按钮 -->
    <!-- 修改 -->
    <el-dialog
      title="修改角色"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogVisible = false"
    >
      <el-form ref="editFormRef" :model="roleinfo" :rules="editFormRules" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleinfo.name"></el-input>
        </el-form-item>

        <!-- prop是验证 -->
        <el-form-item label="名称描述" prop="des">
          <el-input v-model="roleinfo.des"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRoleInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加 -->
    <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%" @close="adddDialogClosed">
      <el-form ref="addroleFormRef" :model="addroleinfo" :rules="addroleRules" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="addroleinfo.name"></el-input>
        </el-form-item>

        <!-- prop是验证 -->
        <el-form-item label="名称描述" prop="des">
          <el-input v-model="addroleinfo.des"></el-input>
        </el-form-item>
        <!-- 多选框 -->
        <el-form-item>
          <el-checkbox-group
            v-model="addroleinfo.checkedUright"
            @change="handleAddRoleCheckedChange"
          >
            <el-checkbox v-for="item in rightlist" :label="item.Uright" :key="item.id">{{item.des}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRoleInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //所有角色列表数据
      rolelist: [],
      //控制分配权限的对话框
      showSetRightDialogVisible: false,
      //所有的权限数据
      rightlist: [],
      //选中的ID
      selectId: "",
      //选中的权限
      checkedUright: [],

      //编辑对话框的内容
      roleinfo: {
        name: "",
        des: "",
      },
      //验证编辑的名字
      editFormRules: {
        name: [
          {
            required: true,
            message: "请输入角色名称",
            trigger: "blur",
          },
        ],
        des: [{ required: true, message: "请输入具体描述", trigger: "blur" }],
      },
      editDialogVisible: false,
      addDialogVisible: false,
      addroleRules: {
        name: [
          {
            required: true,
            message: "请输入角色名称",
            trigger: "blur",
          },
        ],
        des: [{ required: true, message: "请输入具体描述", trigger: "blur" }],
      },
      addroleinfo: {
        name: "",
        des: "",
        checkedUright: [],
      },
    };
  },
  created() {
    this.getRightlist();
    this.getRoleList();
  },
  methods: {
    async getRoleList() {
      const { data } = await this.$http.get("roles");
      console.log(data, 1);
      this.rolelist = data;
      // console.log(this.rolelist);
    },
    async getRightlist() {
      //获取权限列表
      const { data } = await this.$http.get("right");
      this.rightlist = data.data;
    },
    async showEditinfo(id) {
      const { data } = await this.$http.get("roles/" + id);

      this.roleinfo = data.data[0];
      this.editDialogVisible = true;
    },

    // editDialogClosed() {
    //   this.$refs.editFormRef.resetFields();
    // },

    //修改用户并且提交
    editRoleInfo() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return;
        const res = await this.$http.put("roles", {
          roleinfo: this.roleinfo,
        });
        // if (res.meta.status !== 200) {
        //   return this.$message.error("修改失败");
        // }
        console.log(res);
        //关闭对话框 刷新数据 提示成功
        this.roleinfo = "";
        this.editDialogVisible = false;
        this.getRoleList();
        console.log(111111);
        this.$message.success("修改成功");
      });
    },

    //删除
    async delrole(id) {
      //弹框询问是否删除
      const confirmResult = await this.$confirm(
        "此操作将永久删除该角色, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      //如果用户点击确定，返回字符串confirm
      //取消删除。返回字符串cancel
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      //  const {data:res}= await this.$http.delete('users/'+id)
      const { data } = await this.$http.delete("/roles/" + id);
      console.log(data);
      //  if(res.meta.status!==200){
      //    return this.$message.error('删除失败')
      //  }
      this.$message.success("删除成功");
      this.getRoleList();
    },

    async showSetRightDialog(id) {
      console.log(id);
      this.selectId = id;
      const res = await this.$http.get("/roles/" + id);
      this.checkedUright = res.data.data[0].Uright.split(",");
      this.getRightlist();
      console.log(this.rightlist);
      this.showSetRightDialogVisible = true;
    },
    handleCheckedChange(value) {
      this.checkedUright = value;
    },
    async saveRight() {
      //排序
      const r = this.checkedUright
        .map((item) => Number(item))
        .sort((a, b) => a - b);
      console.log(r);
      console.log(String(r));
      const { data } = await this.$http.put("roles/right", {
        Uright: String(r),
        id: this.selectId,
      });
      console.log(data);
      this.showSetRightDialogVisible = false;
      this.selectId = "";
    },
    cancelDialog() {
      (this.checkedUright = []), (this.selectId = "");
      this.showSetRightDialogVisible = false;
    },

    addrole() {
      this.addDialogVisible = true;
    },
    handleAddRoleCheckedChange(value) {
      this.addroleinfo.checkedUright = value;
      console.log(this.addroleinfo.checkedUright);
    },
  async  addRoleInfo() {
      this.$refs.addroleFormRef.validate(async (valid) => {
        if (!valid) return;
  const res=  await    this.$http.post("/roles",this.addroleinfo);
        console.log(res);
        this.addDialogVisible = false;
        this.$message.success('添加成功')
         this.getRightlist();
    this.getRoleList();
      });
    },
    adddDialogClosed() {
      this.$refs.addroleFormRef.resetFields();
      this.addroleinfo.checkedUright = [];
    },
  },
};
</script>

<style lang="less" scoped>
.el-tag {
  margin: 7px;
}
.bdtop {
  border-top: 1px solid #eee;
}
.bdbottom {
  border-bottom: 1px solid #eee;
}
.vcenter {
  display: flex;
  align-items: center;
}
</style>